<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { convertStringToNumber } from "@visual/utils";
defineOptions({
  name: "ListMonitor2"
});
const props = withDefaults(
  defineProps<{
    propValue?: {
      titleList: Array<any>;
      contentList: Array<any>;
      title?: string;
      iconName?: string;
    };
  }>(),
  {
    propValue: () => ({
      iconName: "",
      titleList: [],
      contentList: [],
      title: ""
    })
  }
);
let compArr = ["humidity", "methane", "temperature"];
const imgMap = {};
for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/${compArr[i]}.svg?component`));

  imgMap[compArr[i]] = comp;
}
const classes = (type: number) => {
  return {
    "list-item-content-warn": type === 1,
    "list-item-content-error": type === 2,
    "list-item-content-normal": ![1, 2].includes(type)
  };
};
</script>

<template>
  <leftCompWrapper :title="props.propValue.title" :iconName="propValue.iconName">
    <px-scrollbar max-height="400px" wrap-class="list-warpper">
      <div class="title-list">
        <div class="list-item-content">
          <div v-for="member in props?.propValue.titleList" :key="member.tagNum" class="list-item-content-item">
            <component :is="imgMap[member.icon]" class="list-icon" :class="classes(member.status)" />
            <div class="list-item-val-title">
              <div class="list-item-content-title">{{ member.title }}</div>
              <div class="list-item-content-val">
                <span>{{ convertStringToNumber(member.value) }}</span
                ><span class="text-normal text-[12px]">{{ member.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in props?.propValue.contentList" :key="item.type ? item.type : index" class="list-item">
        <div class="list-item-title">{{ item.name }}</div>

        <div class="list-item-content">
          <div v-for="member in item.attrs" :key="member.tagNum" class="list-item-content-item">
            <component :is="imgMap[member.icon]" class="list-icon" :class="classes(member.status)" />
            <div class="list-item-val-title">
              <div class="list-item-content-title">{{ member.title }}</div>
              <div class="list-item-content-val">
                <span>{{ convertStringToNumber(member.value) }}</span
                ><span class="text-normal text-[12px]">{{ member.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </px-scrollbar>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
.list-warpper {
  display: flex;
  flex-flow: column wrap;
  width: 100%;

  .title-list {
    flex-flow: column wrap;
    width: 100%;
    margin-top: 24px;

    .list-item-content {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      line-height: 17px;
      color: #000;

      .list-item-content-item {
        display: flex;
        align-items: center;
        width: 33%;

        .list-item-val-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: normal;

          .list-item-content-val {
            align-self: start;
            margin-top: 4px;
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }

    .list-item-content-error {
      color: #f87171;
    }

    .list-item-content-warn {
      color: #fbbf24;
    }

    .list-item-content-normal {
      color: #34d399;
    }
  }

  .list-icon {
    width: 30px;
    height: 34px;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 79px;
    margin-bottom: 8px;

    .list-item-title {
      margin-top: 16px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      color: #000;

      &::before {
        display: inline-block;
        width: 3px;
        height: 16px;
        margin-right: 6px;
        vertical-align: middle;
        content: "";
        background: #3b82f6;
        border-radius: 0 100px 100px 0;
      }
    }

    .list-item-content {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      line-height: 17px;
      color: #000;

      .list-item-content-item {
        display: flex;
        align-items: center;
        width: 33%;
        margin-bottom: 16px;

        .list-item-val-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: normal;

          .list-item-content-val {
            align-self: start;
            margin-top: 4px;
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }

    .list-item-content-error {
      color: #f87171;
    }

    .list-item-content-warn {
      color: #fbbf24;
    }

    .list-item-content-normal {
      color: #34d399;
    }
  }
}
</style>
